<template>
  <div class="equipmentInfo" :style="popupStyle">
    <div class="head">
      <span>{{ equipmentData.info.name }}（{{ equipmentData.info.num }}）</span>
    </div>
    <div class="realTime">
      <div class="title">
        <span>实时参数</span>
      </div>
      <div class="realTime_content">
        <div class="realTime_item" v-for="item in equipmentData.info.pointList">
          <span>{{ item.tagName }}</span>：<span>{{ item.value }}</span><span>{{ item.unit }}</span>
        </div>
      </div>
    </div>
    <div class="parameter">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="历史数据" name="first"></el-tab-pane>
        <el-tab-pane label="设备台账" name="second"></el-tab-pane>
        <el-tab-pane label="报警记录" name="third"></el-tab-pane>
        <el-tab-pane label="维护记录" name="fourth"></el-tab-pane>
        <el-tab-pane label="备件列表" name="five"></el-tab-pane>
      </el-tabs>
      <div class="parameterContent">
        <div v-if="activeName == 'first'" class="box1">
          <el-table :data="tableData.list" height="17vh" style="width :100%;" stripe :scrollbar-always-on="true">
            <el-table-column prop="time" label="时间" class-name="column_date" align="center" />
            <el-table-column prop="speed" label="速度 - SV" class-name="column_common" align="center" />
            <el-table-column prop="speedPv" label="速度 - PV" align="center" />
            <el-table-column prop="MPa" label="炉排差压" align="center" />
            <el-table-column prop="temperature" label="炉排温度" align="center" />
          </el-table>
        </div>
        <equipmentLedger v-if="activeName == 'second'"></equipmentLedger>
        <div></div>
      </div>


    </div>
  </div>
</template>

<script setup lang="ts">
import equipmentLedger from "./equipmentLedger.vue";

const props = defineProps({
    top: {
      type: String,
      default: '0px'
    },
    left: {
      type: String,
      default: '0px'
    },
    data: {
      type: Object,
      default: {}
    }
})

let popupStyle = reactive({
    position: 'absolute' as 'absolute',
    top: props.top,
    left: props.left,
})

let equipmentData = reactive({
  info: {
    name: "一次风机",
    num: "GR-YCFJ-020",
    pointList: [
      { tagName: '电机电流', value: '182.72', unit: 'A' },
      { tagName: '电机电流', value: '182.72', unit: 'A' },
      { tagName: '电机电流', value: '51.13', unit: '℃' },
      { tagName: '定子线圈温度', value: '51.13', unit: '℃' },
      { tagName: '电机电流', value: '182.72', unit: 'A' },
      { tagName: '电机电流A', value: '182.72', unit: 'A' },
      { tagName: '电机电流A', value: '182.72', unit: 'A' },
    ]
  }
})

let tableData = reactive({
  list: [
    { time: "00:00", speed: "234.5sec", speedPv: "123.8sec", MPa: "102MPa", temperature: "923℃" },
    { time: "00:00", speed: "234.5sec", speedPv: "123.8sec", MPa: "102MPa", temperature: "923℃" },
    { time: "00:00", speed: "234.5sec", speedPv: "123.8sec", MPa: "102MPa", temperature: "923℃" },
    { time: "00:00", speed: "234.5sec", speedPv: "123.8sec", MPa: "102MPa", temperature: "923℃" },
    { time: "00:00", speed: "234.5sec", speedPv: "123.8sec", MPa: "102MPa", temperature: "923℃" },
    { time: "00:00", speed: "234.5sec", speedPv: "123.8sec", MPa: "102MPa", temperature: "923℃" },
    { time: "00:00", speed: "234.5sec", speedPv: "123.8sec", MPa: "102MPa", temperature: "923℃" },
    { time: "00:00", speed: "234.5sec", speedPv: "123.8sec", MPa: "102MPa", temperature: "923℃" },
    { time: "00:00", speed: "234.5sec", speedPv: "123.8sec", MPa: "102MPa", temperature: "923℃" },
  ]
})
const activeName = ref('first')

const handleClick = (tab: any, event: Event) => {
  console.log(tab, event)
  activeName.value = tab.paneName
}
</script>

<style lang="scss" scoped>
.equipmentInfo {
  width: vh(455);
  height: auto;
  min-height: vh(382);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 25, 35, 0.8);
  border: vh(1) solid #00B1E1;
  z-index: 9;
  padding-left: vh(13);
  padding-right: vh(13);

  .head {
    height: vh(47);
    display: flex;
    align-items: center;
    font-family: Source Han Sans CN;
    font-weight: 500;
    font-size: vh(16);
    color: #FFFFFF;
    // padding-left: vh(20);
    border-bottom: vh(1) solid rgba(255, 255, 255, 0.2);
  }

  .realTime {
    padding-top: vh(12);

    .title {
      font-family: Source Han Sans CN;
      font-weight: 500;
      font-size: vh(14);
      color: #00E3FF;
      line-height: 1;
      // padding-left: vh(17);
    }

    .realTime_content {
      display: flex;
      flex-wrap: wrap;
      margin-top: vh(6);

      .realTime_item {
        width: 33%;
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: vh(12);
        line-height: vh(18);
        color: #A1C3C7;
      }
    }
  }

  .parameter {
    .el-tabs {
      :deep(.el-tabs__item) {
        padding: 0 vh(18);
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: vh(12);
        color: #FFFFFF;
        height: vh(26);
        line-height: vh(26);

        &#tab-first {
          padding-left: 0;
        }
      }

      :deep(.el-tabs__item.is-active) {
        color: #00DEFA;
      }

      :deep(.el-tabs__active-bar) {
        background-color: #00DEFA;
        height: vh(2);
      }

      :deep(.el-tabs__nav-wrap) {
        &::after {
          height: vh(1);
        }
      }
    }

    
  }
}
</style>
